import React, {} from "react";
import { DeleteTwoTone, DragOutlined, EditTwoTone, PlusSquareTwoTone } from "@ant-design/icons";
import st from './control-bar.module.css'
import {Modal} from "antd";

interface DisPlayConfig {
    edit: boolean
    drag: boolean
    add: boolean
    delete: boolean
}

type PropsType = Partial<{
    onClickEdit: () => any
    onClickDrag: () => any
    onClickAdd: () => any
    onClickDelete: () => any
    displayConfig: Partial<DisPlayConfig>,
    style?: React.CSSProperties
}>

const emptyFunc = () => {};

export const ControlBar: React.FC<PropsType> = ({
    onClickDrag= emptyFunc,
    onClickEdit= emptyFunc,
    onClickAdd = emptyFunc,
    onClickDelete = emptyFunc,
    displayConfig = {
        edit: false, drag: false, add: false, delete: false
    },
    style = {}
}) => {

    return <div className={st['control-bar']} style={style}>
        { !!displayConfig.add && <PlusSquareTwoTone onClick={() => onClickAdd()} className={st.icon} /> }
        { !!displayConfig.edit && <EditTwoTone onClick={() => onClickEdit()} className={st.icon} /> }
        { !!displayConfig.drag && <DragOutlined onClick={() => onClickDrag()} className={st.icon} /> }
        { !!displayConfig.delete &&
            <DeleteTwoTone onClick={() => {
                Modal.confirm({
                    type: 'warning',
                    centered: true,
                    content: (<span>确认要删除吗?</span>),
                    onOk: () => {
                        onClickDelete();
                    },
                    okText: '删除',
                    cancelText: '取消',
                })
            }} className={st.icon} />
         }
    </div>

}
